{__NOLAYOUT__}
<layout name="disshop_layout" />

<style>
  .main-nav { display: none; }
</style>
<!-- TOPBAR S -->
<header class="top-bar flex-row">
  <span class="row-item row-item-auto top-bar-back" onclick="window.history.back()">返回</span>
  <h3 class="row-item top-bar-name">__TITLE__({$searchList['totalRows']})</h3>
  <!-- <span class="row-item row-item-auto top-bar-menu">菜单</span> -->
</header>
<!-- TOPBAR E -->

<!-- 品牌功效等筛选 S -->
<nav id="list-select" class="list-select flex-row"></nav>
<!-- 品牌功效等筛选 E -->

<!-- 删选出的商品列表 S -->
<section id="shop" class="shop"></section>
<!-- 删选出的商品列表 E -->

<!-- 删选项模板 -->
<template id="select-tpl">
  {{each data as value index}}
  <div class="row-item list-select-item" data-type="{{index}}">
    <h3 class="list-select-title" data-type="{{index}}">{{each value as t}}{{if t['selected']}}{{t.name}}{{/if}}{{/each}}</h3>
    <div class="list-select-content">
      <ul class="list-select-ul clearfix">
        {{each value as v}}
        <li class="list-select-li" data-value="{{v.value}}">{{v.name}}</li>
        {{/each}}
      </ul>
    </div>
  </div>
  {{/each}}
</template>

<!-- 商品列表模板 -->
<template id="shop-tpl">
  {{each data as value index}}
  <div class="shop-list">
    <a class="flex-row flex-row-top" href="{{value.url}}">
      <div class="row-item row-item-3">
        <img class="top-list-shop w100" src="{{value.pic}}" alt="">
      </div>
      <div class="row-item row-item-7 shop-list-summary">
        <h3 class="shop-list-name">{{value.name}}</h3>
        <p class="shop-list-price ellipsis">
          <strong class="now-price">{{value.price}}</strong>
          <del class="original-price">{{value.price_high}}</del>
          <span class="discount">{{value.discount}}折</span>
        </p>
        <p class="shop-list-num">{{(value.saled_base*1+value.saled_count*1)}}人购买</p>
      </div>
    </a>
    <!-- <a class="add-to-cart" href="javascript:;">购</a> -->
  </div>
  {{/each}}
</template>

<script src="__COMMON__/js/artTemplate.js" charest="utf-8"></script>

<script type="text/javascript">
  var selectListJSON = {$searchListJSON};

  template.config("compress", true);

  var cid = {$sid};
  var sendJSON = {};

  // 防止穿透的遮罩层
  var cover = $("<div>").css({
    position: "absolute",
    display: "none",
    left: "0", right: "0",
    top: "5.857em", bottom: "0",
    backgroundColor: "rgba(255,255,255,.3)",
    zIndex: "10"
  }).appendTo( $("body") );

  var more = $("<p class='readmore'>加载更多</p>");
  var nowPage = 1;
  var type = "";
  var id = 0;

  $(more).on("tap", function() {
    readList( ++nowPage, true );
  });

  $.each(selectListJSON.menuSelected, function(index, item) {
    sendJSON[index] = item;
  });

  // 渲染删选项列表
  var listSelect = $("#list-select");
  function renderSlectDOM( getData ) {
    var selectHTML = template( "select-tpl", {data: getData.menu} );
    $(listSelect).html(selectHTML);
  };

  // 渲染商品列表
  var shop = $("#shop");
  function renderShopDOM ( getData, append ) {
    var shopHTML = template( "shop-tpl", {data: getData.data} );
    append ? $(shopHTML).appendTo( $(shop) ) : $(shop).html(shopHTML);

    // 加载更多
    if ( getData.totalPages > 1 ) {
      $(shop).after( $(more) );
    };
    if ( nowPage > getData.totalPages ) {
      $(more).text("没有更多了");
      nowPage--;
    };
  };
  
  renderSlectDOM( selectListJSON );
  renderShopDOM( selectListJSON );

  // 顶部菜单点击
  $(listSelect).delegate(".list-select-title", "tap", function() {

    var thisContent = $(this).siblings(".list-select-content");

    if ( !$(thisContent).is(":hidden") ) {

      $(thisContent).removeClass("active");
      $(cover).hide();
      $(shop).removeClass("shop-blur");

    } else {

      $(listSelect).find(".list-select-content").removeClass("active");
      $(thisContent).addClass("active");
      $(cover).show();
      $(shop).addClass("shop-blur");
    }

  });


  $(listSelect).delegate(".list-select-li", "tap", function( e ) {

    e.preventDefault();

    $(shop).removeClass("shop-blur");

    $(this).parent().parent().hide();

    setTimeout(function(){
      $(cover).hide();
    }, 350);

    type = $(this).parents(".list-select-item").attr("data-type");
    id = $(this).attr("data-value");
    
    nowPage = 1;
    $(more).text("加载更多");
    readList( nowPage, false );
    
  });

  function readList( page, append ) {

    sendJSON[type] = id;
    sendJSON.keywords = selectListJSON.menuSelected.keywords;
    sendJSON.baseCate = selectListJSON.baseCate;
    sendJSON.sid = cid;
    sendJSON.p = page;

    //showLoading();

    $.post("__CONTROLLER__/search", sendJSON, function( data ) {
      renderSlectDOM( data );
      renderShopDOM( data, append );
      //hideLoading();
    });

  };

</script>